<template>
  <div class="page flex-col">
    <div class="box_9 flex-col">
      <div class="box_1 flex-row">
        <router-link tag="span" to="./login">
          <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjwetx7qft4n8u8ba0jvw7v9zyj5btdun5ab56b843-b9b1-400a-88d4-20e86b1e69e3"
        /></router-link>

        <span class="text_1">忘记密码</span>
      </div>
      <div class="text-wrapper_5 flex-row justify-between">
        <span class="text_2">账号</span>
        <input
          v-model="input1"
          class="text_3"
          type="text"
          placeholder="请输入手机号"
        />
      </div>
      <div class="box_2 flex-col"></div>
      <div class="group_2 flex-row">
        <span class="text_4">验证码</span>
        <input
          v-model="input2"
          class="text_5"
          type="text"
          placeholder="请输入验证码"
        />
        <div class="text-wrapper_2 flex-col">
          <button class="text_6" @click="huoqu">获取验证码</button>
        </div>
      </div>
      <div class="box_4 flex-col"></div>
      <div class="group_3 flex-row">
        <span class="text_7">新密码</span>
        <input
          v-model="input3"
          class="text_8"
          type="text"
          placeholder="6位以上字母组合"
        />
        <img
          class="label_1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqi28fla24i84aexzit75lxy3s7yt6rht0dee4352-99d4-4fc7-8589-2b08a4162414"
        />
      </div>
      <div class="box_6 flex-col"></div>
      <div class="text-wrapper_6 flex-col">
        <span @click="chongzhi" class="text_9">确定重置</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
    };
  },
  methods: {
    huoqu() {
      let phone = this.input1;
      console.log(phone);
      axios
        .get("/api/api/smslog/sendfind.do", { params: { phone } })
        .then((r) => {
          console.log(r);
        });
    },
    chongzhi() {
      let phone = this.input1;
      let code = this.input2;
      let password = this.input3;
      console.log("chongzhi");
      axios
        .post("/api/api/userlogin/findpass.do", { phone, code, password })
        .then((r) => {
          console.log(r);
          if (r.data.code == 200) {
            alert("重置成功");
            location.href = "./login";
          }
        });
    },
  },
};
</script>

<style scoped>
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 7.5rem;
  height: 16.24rem;
  overflow: hidden;
}

.box_9 {
  width: 7.5rem;
  height: 15.37rem;
  margin-bottom: 0.01rem;
}

.box_1 {
  background-color: rgba(255, 255, 255, 1);
  width: 7.5rem;
  height: 0.85rem;
}

.image_2 {
  width: 0.16rem;
  height: 0.3rem;
  margin: 0.28rem 0 0 0.45rem;
}

.text_1 {
  width: 1.41rem;
  height: 0.34rem;
  color: rgba(68, 67, 67, 1);
  font-size: 0.36rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.36rem;
  margin: 0.27rem 3.04rem 0 2.44rem;
}

.text-wrapper_5 {
  width: 2.82rem;
  height: 0.31rem;
  margin: 0.48rem 0 0 0.55rem;
}

.text_2 {
  width: 0.62rem;
  height: 0.31rem;
  color: rgba(68, 67, 67, 1);
  font-size: 0.32rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.32rem;
}

.text_3 {
  width: 1.72rem;
  height: 0.23rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.24rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
  margin-top: 0.05rem;
  border: none;
}

.box_2 {
  width: 6.53rem;
  height: 0.01rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psp295zsi1fbtg8j6uu3asaho72f7o7otj82c2e8b0-2334-4064-91a1-fd28aebf3af1)
    0rem -0.01rem no-repeat;
  background-size: 6.53rem 0.02rem;
  margin: 0.27rem 0 0 0.49rem;
}

.group_2 {
  width: 6.47rem;
  height: 0.39rem;
  margin: 0.54rem 0 0 0.55rem;
}

.text_4 {
  width: 0.94rem;
  height: 0.31rem;
  color: rgba(68, 67, 67, 1);
  font-size: 0.32rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.32rem;
  margin-top: 0.05rem;
}

.text_5 {
  width: 1.42rem;
  height: 0.23rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.24rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
  margin: 0.1rem 0 0 0.46rem;
  border: none;
}

.text-wrapper_2 {
  background-color: rgba(216, 236, 254, 1);
  border-radius: 19px;
  height: 0.39rem;
  margin-left: 2.13rem;
  width: 1.52rem;
}

.text_6 {
  width: 0.98rem;
  height: 0.19rem;
  color: rgba(45, 50, 67, 1);
  font-size: 0.2rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.2rem;
  margin: 0.1rem 0 0 0.27rem;
}

.box_4 {
  width: 6.53rem;
  height: 0.01rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5opdbo8hc97vffdypyzdp0d2ihpqlsdihd01a59f5-6b7b-4e43-8ba1-77f6a5c78b4a)
    0rem -0.01rem no-repeat;
  background-size: 6.53rem 0.02rem;
  margin: 0.24rem 0 0 0.49rem;
}

.group_3 {
  width: 6.47rem;
  height: 0.31rem;
  margin: 0.58rem 0 0 0.55rem;
}

.text_7 {
  width: 0.94rem;
  height: 0.31rem;
  color: rgba(68, 67, 67, 1);
  font-size: 0.32rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.32rem;
}

.text_8 {
  width: 1.81rem;
  height: 0.23rem;
  color: rgba(153, 153, 153, 1);
  font-size: 0.24rem;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
  margin: 0.05rem 0 0 0.46rem;
  border: none;
}

.label_1 {
  width: 0.28rem;
  height: 0.23rem;
  margin: 0.05rem 0 0 2.98rem;
}

.box_6 {
  width: 6.53rem;
  height: 0.01rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps9l86smyxsyeybwsvcf41dkct6i6svstzgdcb2f7c3-bb72-4f86-a2ef-f849ccad12f8)
    0rem -0.01rem no-repeat;
  background-size: 6.53rem 0.02rem;
  margin: 0.27rem 0 0 0.49rem;
}

.text-wrapper_6 {
  background-image: linear-gradient(
    -73deg,
    rgba(182, 220, 255, 1) 0,
    rgba(182, 220, 255, 1) 0,
    rgba(185, 182, 229, 1) 100%,
    rgba(185, 182, 229, 1) 100%
  );
  border-radius: 48px;
  height: 0.96rem;
  width: 5.37rem;
  margin: 0.89rem 0 0 1.07rem;
}

.text_9 {
  width: 0.66rem;
  height: 0.33rem;
  color: rgba(45, 50, 67, 1);
  font-size: 0.34rem;
  font-family: PingFangSC-Medium;
  text-align: center;
  white-space: nowrap;
  line-height: 0.96rem;
  margin-left: 2rem;
}

.group_4 {
  width: 5.35rem;
  height: 0.24rem;
  margin: 7.67rem 0 0 1.09rem;
}

.block_1 {
  border-radius: 50%;
  width: 0.24rem;
  height: 0.24rem;
  border: 2px solid rgba(69, 67, 67, 1);
}

.text-wrapper_4 {
  width: 5.04rem;
  height: 0.24rem;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
}

.text_10 {
  width: 5.04rem;
  height: 0.24rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
}

.text_11 {
  width: 5.04rem;
  height: 0.24rem;
  color: rgba(46, 114, 186, 1);
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
}

.text_12 {
  width: 5.04rem;
  height: 0.24rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
}

.text_13 {
  width: 5.04rem;
  height: 0.24rem;
  color: rgba(46, 114, 186, 1);
  font-size: 0.24rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.24rem;
}

.box_8 {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 6px;
  width: 2.7rem;
  height: 0.12rem;
  margin: 1.09rem 0 0.13rem 2.4rem;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}
body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.justify-start {
  display: flex;
  justify-content: flex-start;
}
.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}
.justify-around {
  display: flex;
  justify-content: space-around;
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.align-start {
  display: flex;
  align-items: flex-start;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-end {
  display: flex;
  align-items: flex-end;
}
</style>
